<template>
	<view class="login">
		<view class="black_1">
			<view class="line_2">
				修改密码
			</view>
			<view class="line_4">
				<view class="left">0086</view>
				<uni-easyinput class="inputs" type="number" v-model="phone" :inputBorder="false"
					:styles="{backgroundColor: 'transparent'}" placeholder="请输入手机号"
					placeholder-style="color:#9F9E9E;font-size:16px"></uni-easyinput>
			</view>
			<view class="line_5">
				<uni-easyinput class="inputs" type="text" v-model="code" :inputBorder="false"
					:styles="{backgroundColor: 'transparent'}" placeholder="请输入验证码"
					placeholder-style="color:#9F9E9E;font-size:16px"></uni-easyinput>
				<view class="right" @click="sendCode()">{{codeText}}</view>
			</view>

			<view class="line_5">
				<uni-easyinput class="inputs" type="password" v-model="password" :inputBorder="false"
					:styles="{backgroundColor: 'transparent'}" placeholder="请输入新密码"
					placeholder-style="color:#9F9E9E;font-size:16px"></uni-easyinput>
			</view>

			<view class="line_5">
				<uni-easyinput class="inputs" type="password" v-model="payPassword" :inputBorder="false"
					:styles="{backgroundColor: 'transparent'}" placeholder="再次输入密码"
					placeholder-style="color:#9F9E9E;font-size:16px"></uni-easyinput>
			</view>

			<view class="line_7" @click="submit()">
				完成
			</view>
			<view class="line_8" @click="back()">
				返回登录
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				password: '',
				payPassword: '',
				code:'',
				codeTime:59,
				codeText:'发送',
				inter: null
			};

		},
		methods: {
			back() {
				uni.navigateBack()
			},
			submit() {
				let data = {}
				if (!this.phone) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				if (!this.password) {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.password) {
					uni.showToast({
						title: '确认密码不能为空',
						icon: 'none'
					})
					return
				}
				if (this.payPassword != this.password) {
					uni.showToast({
						title: '两次密码不相同',
						icon: 'none'
					})
					return
				}
				data = {
					mobile: this.phone,
					captcha: this.code,
					password: this.password,
					confirm_password: this.payPassword
				}

				this.api.http.requests('user/resetpwd', data, res => {
					uni.showToast({
						title: res.msg,
						success: function() {
							setTimeout(function() {
								//要延时执行的代码
								uni.navigateBack();
							}, 2000) //延迟时间 
						}
					})
				}, "POST")

			},
			getTextCode() {
				var that = this
				if(that.inter)
					return
				this.inter = setInterval(function() {
					if (that.codeTime <= 0) {
						clearInterval(that.inter);
						that.inter =null
						that.codeText = "获取验证码"
						that.codeTime = 59
						return false;
					}
					that.codeText = that.codeTime + "秒"
					that.codeTime -= 1;
				}, 1000);
			},
			sendCode() {
				if(this.inter)
					return
				if (!this.phone) {
					uni.showToast({
						title: "请输入手机号",
						icon: 'none'
					})
					return
				}

				let data = {
					"mobile": this.phone,
					"event": "resetpwd",
				}

				this.api.http.requests("sms/send", data, res => {
					this.getTextCode()
					uni.showToast({
						title: res.msg
					})
				}, "POST")
			}

		},
		onUnload() {
			if (!this.inter) {
				clearInterval(that.inter);
			}
		}
		

	}
</script>
<style>
	page {
		background: url(@/static/bg2.png) no-repeat;
		background-size: 100% 100%;
	}
</style>
<style scoped lang="less">
	

	.black_1 {
		margin: 100px 10px 10px 10px;
		background: #00000050;
		border-radius: 15px 15px 15px 15px;
		text-align: center;
		padding: 20px 20px 35px 20px;


		.line_2 {
			font-size: 42rpx;
			font-weight: 800;
			color: #FFFFFF;
			margin-top: 10px;
			margin-bottom: 25px;
			text-align: start;
		}

		.line_5,
		.line_4 {
			display: flex;
			margin-top: 25px;
			align-items: center;
			background-color: #FFFFFF;
			border-radius: 30px;
			padding: 0px 10px;

			.right {
				padding: 1px 8px;
				color: #FFFFFF;
				background: #FE903D;
				border-radius: 30px 30px 30px 30px;
			}

			.left {
				padding-right: 10px;
				border-right: 1px solid #A8A8A8;
			}
		}

		.inputs {
			text-align: start;
			padding: 5px 0px;
		}

		.line_6 {
			margin-top: 10px;
			float: right;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		.line_7 {
			margin: 45px 2px 0px 2px;
			padding: 8px;
			background: #FFFFFF;
			border-radius: 14rpx;
			font-size: 35rpx;
			font-weight: bold;
			color: #333333;
		}

		.line_8 {
			margin: 20px 2px 0px 2px;
			border-radius: 14rpx;
			padding: 8px;
			border: 2rpx solid #FFFFFF;
			font-size: 35rpx;
			font-weight: bold;
			color: #FFFFFF;

		}


	}
</style>